<template>
  <div class="logoPage" v-loading="loading">
    <div class="loginLogo">
      <img style="width: 45%;" src="../assets/img/keyouLogo.png" alt="">
    </div>
    <div class="w-content">
      <div class="w-c-form">
        <p class="account-login">账号登录</p>
        <el-input v-model="username" class="username" placeholder="请输入账号">
          <i slot="prefix" class="el-input__icon iconfont icondenglu"></i>
        </el-input>
        <el-input v-model="password" class="password mb-20" placeholder="请输入密码" type="password">
          <i slot="prefix" class="el-input__icon iconfont iconmima"></i>
        </el-input>
        <el-input v-if="ifSend" v-model="code" class="password mb-20 verCode" placeholder="请输入验证码">
          <i slot="prefix" class="el-input__icon iconfont iconmima"></i>
          <template slot="append" class="ver-btn">
            <el-button :disabled="time !== 60" @click="getVerCode">
              {{ text }}
            </el-button>
          </template>
        </el-input>
        <el-checkbox class="remember" v-model="checked">记住密码</el-checkbox>
        <el-button class="logo_btn" type="primary" @click="codeLogin" v-if="ifSend">登录</el-button>
        <el-button class="logo_btn" type="primary" @click="login" v-else>登录</el-button>
        <div class="error-msg">
          <!--请输入密码-->
         </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations, mapActions } from "vuex"
import { encryptByDES } from "@/assets/js/tool"
import * as CommonAction from '@/api/common'
import { Message } from "element-ui"
import * as tool from '@/tool/util'


export default {
  name: "Login",
  data() {
    return {
      codeImg: "", // 验证码图片地址
      username: "",
      password: "",
      outId: "", // 验证码outId
      checked: false, // 记住密码
      type: '',
      time: 60,
      phone: null,
      sending: false,
      ifSend: false,
      code: ''
    }
  },
  computed: {
    ...mapGetters(['loading']),
    text() {
      return this.time === 60 ? '发送验证码' : `${this.time}秒后再次发送`
    }
  },
  mounted() {
    this.$store.commit("SET_LOADING", false)
    const username = tool.getCookie('username')
    const password = tool.getCookie('password')
    if (username && password) {
      this.username = username
      this.password = password
      this.checked = true
    }

    // this.getCodeImg()
    // 主页添加键盘事件,注意,不能直接在焦点事件上添加回车
    const lett = this
    document.onkeydown = function (event) {
      event = window.event || event
      const key = event.keyCode
      if (key === 13) {
        lett.login()
      }
    }
  },
  methods: {





    ...mapMutations([
      "setUserInfo",
      "setUserInfoObj",
      "setMenuInfo",
      "setdeptInfo"
    ]),
    ...mapActions(['getNavigation']),
    // 记住密码
    keepWord() {
      if (this.checked) {
        tool.setCookie('username', this.username, 7)
        tool.setCookie('password', this.password, 7)
      } else {
        tool.delCookie('username')
        tool.delCookie('password')
      }

    },
    // 根据账号密码获取token信息
    async login() {
      try {
        if (!this.password || !this.username) {
          return this.$message.error('请输入账号密码')
        }
        const param = {
          password: encryptByDES(this.password),
          username: this.username
        }
        const res = await CommonAction.token(param)
        // if (!res.access_token) {
        //   this.$message.error("token获取失败")
        //   return
        // }
        console.log("用户信息", res)
        // history.go(-history.length + 1)
        this.keepWord()
        this.setUserInfo(res); // 保留用户信息
        this.setUserInfoObj(res);
        // 获取用户菜单
        this.getNavigation((path) => {
          this.$router.replace(path)
        })
        // await this.getUserInfo()
        // this.getNavigation((path) => {
        //   this.$router.replace(path)
        // })
      } catch (error) {
        Message.error(error.message+'请重新登录')
        // 这个地方是这个为了这个测试的时候添加的数据
        // this.$router.replace('/orderManagement/list')
        //  修改了一下这个地方的信息
        this.getNavigation((path) => {
          this.$router.replace('/orderManagement/list')
          // this.$router.replace(path)

        })
      }
    },
    // 获取用户信息
    async getUserInfo() {
      const userInfo = await CommonAction.userInfo()
      this.setUserInfoObj(userInfo)
      this.phone = userInfo.user.phone
      let ifgetCode = (new Date(userInfo.user.createTime) - new Date(userInfo.user.updateTime) == 0)
      if (ifgetCode) {
        this.ifSend = true
        this.$store.commit("SET_IFNEW", true)
        this.getVerCode()
      } else {
        this.getNavigation((path) => {
          this.$router.replace(path)
        })
      }
      // const role = userInfo.user.sysRoles[0].code
      // if (role === "VISIT_SUPER_ADMIN" || role === "ADMIN") {
      //   this.getmenuInfo()
      // } else if (role === "VISIT_ADMIN") {
      //   this.getconfiguration(userInfo.user.deptInfo.id)
      // } else if (role === "VISIT_STAFF") {
      //   this.getconfiguration(userInfo.user.deptInfo.id)
      // }
    },
    // async getconfiguration(id) {
    //   try {
    //     const res = await CommonAction.selectAll({ orgId: id })
    //     this.setdeptInfo(res.data)
    //     this.getmenuInfo()
    //   } catch (e) {
    //     this.$message.error("获取系统信息失败")
    //   }
    // },
    creatEle(msg) {
      let errorMsg = document.getElementsByClassName("error-msg")[0]
      let oDiv = document.createElement("div")
      oDiv.className = "shake-horizontal"
      oDiv.innerText = msg
      errorMsg.innerHTML = ""
      errorMsg.appendChild(oDiv)
    },
    async getVerCode() {
      if (this.sending) return
      this.sending = true
      const res = await CommonAction.getCode({ phone: this.phone })
      this.sending = false
      if (!res) return
      this.time -= 1
      const timer = setInterval(() => {
        this.time -= 1
        if (this.time === 0) {
          clearInterval(timer)
          this.time = 60
        }
      }, 1000)
    },
    async codeLogin() {
      const res = await CommonAction.checkCode({ phone: this.phone, code: this.code })
      if (res.code === 0) {
        this.getNavigation((path) => {
          this.$router.replace(path)
        })
      }
    }
  },
  destroyed() {
    document.onkeydown = null
  }
}
</script>
<style lang="scss" scoped>
.logoPage {
  position: relative;
  width: 100vw;
  min-width: 100vw;
  height: 100vh;
  background-image: url("../assets/img/blackBg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;

  .loginLogo {
    position: absolute;
    top: 15%;
    width: 100%;
    text-align: center;
  }

  .w-content {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    width: 400px;
    height: 367px;
    // font-family: 微软雅黑;
    transform: translate(-50%, -50%);

    .w-c-title {
      height: 40px;
      font-size: 30px;
      font-weight: bold;

      /* color:rgba(255,255,255,1); */
      line-height: 40px;
      text-align: center;
      letter-spacing: 0.36px;
    }

    .w-c-form {
      width: 400px;

      /* height: 390px; */
      padding: 40px 50px 80px 50px;
      margin: 36px auto 0;
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 20px;

      .username {
        margin-bottom: 25px;
      }

      ::v-deep .el-input__inner {
        height: 50px;
        line-height: 50px;
        color: #fff;
        background: transparent;
      }

      ::v-deep .el-input__prefix {
        left: 10px;
      }

      .account-login {
        margin-bottom: 24px;
        font-size: 20px;
        color: #fff;
      }

      .iconfont {
        color: #fff;
      }

      .remember {
        color: #fff;
      }

      .w-l-c-box {
        position: relative;

        .el-form-item__label {
          // font-family: 微软雅黑;
          font-size: 14px;
          color: #333;
        }

        span {
          position: absolute;
          top: 0;
          right: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 96px;
          height: 40px;
          // font-family: 微软雅黑;
          font-size: 17px;
          color: #02a7f0;
          text-align: center;
          cursor: pointer;
          background: rgba(240, 244, 249, 1);
          border: 1px solid rgba(204, 204, 204, 1);
        }

        .el-input {
          display: block;
        }

        input {
          width: 100%;
          height: 40px;
          font-size: 14px;
          color: #333;
          background: rgba(240, 244, 249, 1);
          border: 1px solid rgba(204, 204, 204, 1);
          outline: none;
        }

        input::placeholder {
          color: #999;
        }
      }

      .logo_btn {
        width: 100%;
        height: 40px;
        padding: 0;
        margin-top: 26px;
        font-size: 20px;
        line-height: 40px;
        border: none;
      }

      .logo-bottom {
        position: relative;
        margin-top: 15px;

        .el-checkbox {
          position: absolute;
          left: 0;

          .el-checkbox__label {
            font-size: 12px;
          }
        }

        .l-b-span {
          position: absolute;
          right: 0;
          font-size: 12px;
        }
      }

      .error-msg {
        width: 342px;
        margin-bottom: 10px;
        line-height: 24px;
        color: #fff;
        text-align: center;
      }

      .verCode {
        ::v-deep .el-input__inner {
          width: 165px;
          border-radius: 5px;
        }
      }

      ::v-deep .el-input-group__append {
        width: 127px;
        text-align: center;
        border-radius: 5px;
      }
    }
  }
}
</style>
